<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" type="text/css" href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="static/assets/global/css/components.css"/>
	<link rel="stylesheet" type="text/css" href="static/assets/admin/pages/css/login.css"/>
	<script type="text/javascript" src="static/assets/global/plugins/jquery-1.11.0.min.js"></script>
</head>
<body>
	<div class="content">
		<h3 class="form-title">商品列表浏览</h3>
		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr>
						<th>商品名</th>
						<th>商品图片</th>
						<th>商品描述</th>
						<th>商品价格</th>
						<th>商品库存</th>
						<th>商品销量</th>
					</tr>
				</thead>
				<tbody id="container">
					
				</tbody>
			</table>
		</div>
	</div>
</body>
<script>
	// 定义全局商品数组信息
	var g_itemList = [];
	jQuery(document).ready(function(){
			$.ajax({
				type: "GET",
				url:"http://localhost:8090/item/listItem",
				xhrFields:{withCredentials:true},
				success:function(data) {
					if(data.status == "success") {
						g_itemList = data.data;
						reloadDom();
					} else {
						alert("获取商品信息失败，原因为" + data.data.errMsg);
					}
				},
				error:function(data) {
					alert("获取商品信息失败，原因为" + data.responseText);
				}
			})
	});
	function reloadDom() {
		for (var i = 0; i < g_itemList.length; i++) {
			var itemVO = g_itemList[i];
			var dom = "<tr data-id='"+itemVO.id + "' id='itemDetail" + itemVO.id + "'><td>" + itemVO.title + "</td><td><img style='width:100px;height:auto;' src='" + itemVO.imgUrl + "'/></td><td>" +itemVO.description+"</td><td>"+itemVO.price + "</td><td>" + itemVO.stock + "</td><td>" + itemVO.sales + "</td>";
			$("#container").append($(dom));
			$("#itemDetail" + itemVO.id).on("click", function(e){
				window.location.href="getItem.html?id=" + $(this).data("id");
			});
		}
	}
</script>
</html>